<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="d" uri="http://claudiushauptmann.com/jsp-decorator/"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<d:decorate filename='../shared/user-masterpage.jsp'>
    <d:content placeholder='title'>Afeka Bid System</d:content>
    <d:content placeholder='head'>
        <script type="text/javascript" src="../scripts/knockout-2.2.0.js"></script>
        <script type="text/javascript" src="../scripts/knockout.mapping-latest.js"></script>
    </d:content>
    <d:content placeholder='body'>
        <form method="post">
            <table class="table-sales wide">
                <tr>
                    <td>Product:</td>
                    <td><input type="text" required="required" name="product.name" data-bind="value: name" /></td>
                </tr>
                <tr>
                    <td>Description:</td>
                    <td><input type="text" name="product.description" data-bind="value: description" /></td>
                </tr>
                <tr>
                    <td>Type:</td>
                    <td>
                        <label for="tender">Tender</label>
                        <input type="radio" name="product.type" id="tender" value="1" data-bind="checked: productType" />
                        <label for="auction">Auction</label>
                        <input type="radio" name="product.type" id="auction" value="2" data-bind="checked: productType" />
                    </td>
                </tr>
                <tr data-bind="visible: productType() == 1">
                    <td>Date End:</td>
                    <td><input type="text" name="product.dateEnd" data-bind="value: dateEnd, attr: {required: productType() == 1}" /></td>
                </tr>
                <tr>
                    <td>Min Price:</td>
                    <td><input type="number" name="product.price" min="0" value="0" data-bind="value: price" required="required" /></td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="Save" data-bind="click: save"/>
                    </td>
                </tr>
            </table>
        </form>
        <script type="text/javascript">
            var message = "${message}";
            $(document).ready(function(){
                var ViewModel = function(){
                    var $t = this;
                    $t.name = ko.observable("${product.name}");
                    $t.description = ko.observable("${product.description}");
                    $t.productType = ko.observable(${product.type});
                    $t.dateEnd = ko.observable("${product.dateEnd}");
                    $t.price = ko.observable(${product.price});

                    $t.save = function(){
                        //TODO validation
                        return true;
                    };
                };
                ko.applyBindings(new ViewModel());

                if(message != ""){
                    alert(message);
                }
            });
        </script>
    </d:content>
</d:decorate>